<template>
  <div id="all" style="height: 800px">
    <div id="header" style="height: 50px">
      <el-row>
        <el-col :span="5"
          ><el-select v-model="shengValue" placeholder="省" @change="cSheng()">
            <el-option
              v-for="item in sheng_options"
              :key="item.shengId"
              :label="item.shengName"
              :value="item.shengId"
            >
            </el-option> </el-select
        ></el-col>
        <el-col :span="5"
          ><el-select v-model="shiValue" placeholder="市" @change="cShi()">
            <el-option
              v-for="item in shi_options"
              :key="item.shiId"
              :label="item.shiName"
              :value="item.shiId"
            >
            </el-option> </el-select
        ></el-col>
        <el-col :span="5"
          ><el-select v-model="quValue" placeholder="区">
            <el-option
              v-for="item in qu_options"
              :key="item.quId"
              :label="item.quName"
              :value="item.quId"
            >
            </el-option> </el-select
        ></el-col>
        <el-col :span="6"
          ><el-input
            v-model="inputValue"
            placeholder="请输入详细地址"
          ></el-input>
        </el-col>
        <el-col :span="3"
          ><el-button type="success" @click="search()">搜索</el-button>
        </el-col>
      </el-row>
    </div>
    <br />
    <hr />
    <!-- -----------------------------header End---------------------------------- -->
    <div id="bdMap">
      <!-- 
    scroll-wheel-zoom是是否可以缩放
    @ready是图加载完后触发事件
    center是位置定位
    zoom是缩放大小限制
    inertial-dragging是允许惯性拖拽
   -->
      <baidu-map
        class="bm-view"
        :zoom="15"
        :center="center"
        inertial-dragging
        @ready="mapReady"
        :scroll-wheel-zoom="true"
      >
        <!-- 标注点 -->
        <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
        <bm-marker
          :position="center"
          :dragging="true"
          animation="BMAP_ANIMATION_BOUNCE"
        >
          <bm-label
            content="当前位置"
            :labelStyle="{ color: 'red', fontSize: '12px' }"
            :offset="{ width: -35, height: 30 }"
          />
        </bm-marker>
        <!-- 定位控件   anchor="BMAP_ANCHOR_BOTTOM_RIGHT"代表放在右下角 -->
        <bm-geolocation
          anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
          :showAddressBar="true"
          :autoLocation="true"
        ></bm-geolocation>

        <!-- 缩放控件   anchor代表控件停靠位置   anchor="BMAP_ANCHOR_TOP_RIGHT"代表放在右上角-->
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      </baidu-map>
    </div>
  </div>
</template>

<script>
//引入组件
import {
  BaiduMap,
  BmControl,
  BmView,
  BmAutoComplete,
  BmLocalSearch,
  BmMarker,
  BmGeolocation,
} from "vue-baidu-map";
export default {
  mounted() {
    //初始化下拉列表
    this.updateSelect();
  },
  data() {
    return {
      //定位位置信息
      center: {},
      //需要引入的组件
      components: {
        BaiduMap,
        BmControl,
        BmView,
        BmAutoComplete,
        BmLocalSearch,
        BmMarker,
        BmGeolocation,
      },
      // 导航信息：
      inputValue: "",
      sheng_options: [],
      shi_options: [],
      qu_options: [],
      shengValue: "",
      shiValue: "",
      quValue: "",
    };
  },

  methods: {
    //   省下拉列表change事件
    cSheng() {
      let config = {
        headers: {
          "Content-Type": "text/plain",
        },
      };
      // 更改省的时候区异步请求获取市的信息
      this.$axios
        .post("shi/findAll", this.shengValue, config)
        // 处理响应
        .then((resp) => {
          let r = resp.data;
          if (r.code == 200) {
            this.shi_options = r.data;
          }
        });
    },
    //   市下拉列表change事件
    cShi() {
      let config = {
        headers: {
          "Content-Type": "text/plain",
        },
      };
      // 更改市的时候区异步请求获取市的信息
      this.$axios
        .post("qu/findAll", this.shiValue, config)
        // 处理响应
        .then((resp) => {
          let r = resp.data;
          if (r.code == 200) {
            this.qu_options = r.data;
          }
        });
    },
    // 搜索点击事件
    search() {
      // 搜集参数存到sessionStorage里
      let parking_path = {
        shengValue:this.shengValue,
        shiValue:this.shiValue,
        quValue:this.quValue,
        inputValue:this.inputValue,
      };
      sessionStorage.setItem("p_path",JSON.stringify(parking_path));
      this.$router.push("/UHome/Parking");
    },
    //地图加载后的回调
    mapReady({ BMap, map }) {
      //保存this指向，因为在百度的回调中this不指向vue
      const _this = this;
      // 获取自动定位方法
      var geolocation = new BMap.Geolocation();
      // 获取自动定位获取的坐标信息
      geolocation.getCurrentPosition(
        function (r) {
          //可以conso.log看一下这个r，他里面包含了检索到的位置信息。下面就把两个维度信息赋值给center来定位
          _this.center = {
            lng: r.point.lng,
            lat: r.point.lat,
          };
        },
        //启用高精度
        { enableHighAccuracy: true }
      );
    },
    // 初始化下拉列表
    updateSelect() {
      // 收集参数
      // 发送请求
      this.$axios
        .post("sheng/findAll")
        // 处理响应
        .then((resp) => {
          let r = resp.data;
          if (r.code == 200) {
            this.sheng_options = r.data;
          }
        });
    },
  },
};
</script>

<style scoped>
.el-row {
  margin-bottom: 30px;
  margin-top: 10px;
}
.el-col {
  border-radius: 4px;
  margin-top: 10px;
}
/* 给地图个宽高 */
.bm-view {
  height: 700px;
}
</style>